<template>
  <div class="center-box-detail">
    <section class="mar-top mar-bottom class-top dl-row-sb center" :model="couserObj">
      <img :src="couserObj.themeImage">
      <div>
        <h1>{{couserObj.courseName}}</h1>
        <p style="height: 150px;overflow-y: auto" >课程介绍：{{couserObj.courseDesc}}</p>
        <div class="dl-row-sb">
          <ul class="sea-btn-blue">
           <!-- <li>课程时长：{{ couserObj.classHour| formateDate}}</li> -->
         <!--   <li>学习人数：{{couserObj.studyNum}} 人</li> -->
			<li><i class="el-icon-s-flag"></i>&nbsp;课程标签 : {{couserObj.source}}</li>
			<li><i class="el-icon-time"></i> 			
			<span v-if="personStudyInfoObj.courseResourceName" >&nbsp;上次学至:{{personStudyInfoObj.courseResourceName}}</span>
			<span v-else>&nbsp;无学习记录</span>
			</li>
          </ul>
          <div class="dl-row-end star-box" style="margin-bottom: 2px;line-height: 0px;">
            <!-- <div class="dl-row center up"  @click="collectionCourse()"  v-if="!iscollect">
              <i class="el-icon-star-off up-star"></i><span>收藏</span>
            </div>
            <div class="dl-row center down"  @click="cancelCollection()" v-if="iscollect">
              <i class="el-icon-star-on down-star"></i><span>已收藏</span>
            </div>
			 <div class="dl-column center right-btn mar-bottom-20" v-show="learnType">
						<div  style="color: #2868b0;margin-bottom: 5px;font-weight: 500;"><span><i class="el-icon-time"></i>&nbsp;上次学至:{{personStudyInfoObj.courseResourceName}}</span></div>
						<el-button type="success" @click="continueStudy" round><i class="el-icon-position"></i>&nbsp;继续学习</el-button>
			</div> -->
			<div class="dl-column center right-btn mar-bottom-20">
				<el-button type="success"  @click="goback()" size="small" round><i class="el-icon-back"></i>&nbsp;返回</el-button>
			</div>
          </div>
        </div>
      </div>
    </section>
    <section class="">
      <article class="flex">
        <div class="dl-row center tab-box mar-bottom-20" style="margin-left: -15px">
          <div v-for="(item, index) in btnArr" :key="index" class="btn" @click="handleChange(index)">
            <span class="cursor-pointer pb-1" :class="index === btnIndex ? 'act-item':''">{{ item.name }}</span>
          </div>
        </div>
      </article>
      <article class="my-2">
        <div v-if="btnIndex === 0">
          <Course :courseChapterList="courseChapterList" :couserObj="couserObj" :courseScore="courseScore" ></Course>
        </div>
      </article>
    </section>
</div>
</template>

<script>
	import Course from "./components/course.vue"
	import { getCourseInfo } from '@/api/course'
	import { formatSeconds } from '@/utils/index'
	import { personStudyInfo } from '@/api/course'
	export default {
	  components: {
		Course
	  },
	  data() {
		return {
		  loading:false,
		  learnType:false,
		  personStudyInfoObj:{
			  courseResourceName:''
		  },
		  courseId: this.$route.query.courseId,
		  iscollect:false,
		  imageSrc:"",
		  couserObj:{},
		  collectSelf:{
			  id:''
		  },
		  courseScore:{},
		  courseChapterList:[],
		  classImg: require('../../assets/image/u38.jpg'),
		  btnIndex: 0,
		  btnArr: [
			{
			  name: '课程内容',
			  type: 'source',
			}
		  ],
		}
	  },
	  watch: {
	    'personStudyInfoObj.courseResourceName': {
	      handler: function (newVal, oldVal) {
	        this.personStudyInfoObj.courseResourceName=newVal
	      },
	      deep: true
	    }
	  },
	  created() {
	  	this.$nextTick(() => {
	  	    this.courseInfo();
			this.studyInfo();
	  	})
	  },
	  filters: {
	    formateDate (time) {
	      return formatSeconds(time)
	    }
	  },
	  methods: {
		courseInfo(){
			this.loading = true
			getCourseInfo(this.courseId).then(res=>{
				this.couserObj=res.course;
				this.courseChapterList=res.courseChapterList;
				setTimeout(()=> {
					this.loading = false
				}, 500);
			}).catch(res=>{
				this.$message({
				  message: '获取课程信息失败！',
				  type: 'danger'
				});
				this.loading = false
			})
		},
		getImage(obj){
			var array=eval('(' + obj.themeImage + ')');
			var imageUrl="";
			if(Object.prototype.toString.call(array)==='[object Array]'){
				imageUrl=array[0].url;
			}
			this.imageSrc=imageUrl;
		},  
		handleChange(index) {
		  this.btnIndex = index
		},
		goback(){
			this.$router.push({path:'/home'})
		},
		studyInfo(){
			var params={
				courseId:this.$route.query.courseId
			}
			personStudyInfo(params).then(res=>{
				if(res!="" && res!=null){
					this.activeIndex=res.courseResourceId
					this.personStudyInfoObj=res;
					this.learnType=true
				}else{
					this.learnType=false
				}
			})
		},
	  },
	}
</script>

<style lang="scss" scoped>
.class-top{
  img{
    width: 345px;
    height: 240px;
    margin-right: 40px;
    border-radius: 15px 15px 15px 15px;
  }
  h1{
    width: 768px;
    font-size: 26px;
    font-weight: bold;
    color: #000000;
    line-height: 42px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
  }
  p{
    width: 768px;
    font-size: 14px;
    font-weight: 400;
    color: #545C63;
    line-height: 24px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
  }
  .tab-box{
    margin-left: -15px;
  }

  .star-box .up{
    span{
      color: #999;
    }
  }
  .star-box:hover .up i,.star-box:hover .up span{
    color: #0068B6;
    cursor: pointer;
  }

  .star-box .down{
    span{
      color: #0068B6;
    }
  }
  .star-box:hover .down i,.star-box:hover .down span{
    cursor: pointer;
  }

  .up-star{
    font-size: 18px;
    color: #999;
    margin-right: 3px;
  }
  .down-star{
    font-size: 22px;
    color: #0068B6;
    margin-right: 3px;
  }
}
</style>